<template>
    <div class="home">

        <div>
            <!--搜索区-->
            <el-input
                    v-model="data.inputFileName"
                    placeholder="请输入文件名"
                    :suffix-icon="Search"
                    style="width: 400px;"
                    clearable />
        </div>

        <div style="margin: 10px 0px">

            <!-- 上传文件 -->



            <el-upload
                    style="display: inline-block;"
                    action="http://124.221.133.96:9090/file/upload"
                    :show-file-list="false"
                    :on-success="handleFileSuccess"
            >

                <!--//<el-icon><upload /></el-icon>-->
                <el-button style="margin-left: 10px" type="primary" plain>上传文件<el-icon>
                    <upload/>
                </el-icon>
                </el-button>

            </el-upload>

        </div>

        <!--表格区-->
        <el-table :data="data.tableData"  stripe>
            <el-table-column sortable prop="id" label="编号"/>
            <el-table-column prop="name" label="文件名称"/>
            <el-table-column prop="type" label="文件类型"/>
            <el-table-column sortable prop="size" label="文件大小(kb)"/>
            <el-table-column fixed="right" label="操作">
                <template #default="scope">
                    <el-button type="text" size="small" @click="download(scope.row.url)"
                    >下载
                    </el-button
                    >

                    <el-button type="text" size="small" @click="preView(scope.row)"
                    >预览
                    </el-button
                    >



                    <el-popconfirm
                            title="你确定删除该信息吗?"
                            @confirm="del(scope.row.id)"
                    >
                        <template #reference>
                            <el-button type="text" size="small"
                            >删除
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>

        </el-table>



        <div class="pagination-block" style="margin-top: 10px">
            <el-pagination
                    :currentPage="data.currentPage"
                    :page-size="data.pageSize"
                    :page-sizes="[5, 10, 15, 20]"
                    :small="data.small"
                    :background="data.background"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="data.total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script setup>
    import request from '../utils/request'
    import {Search, Iphone, User, HomeFilled, CirclePlus, Upload, Download ,Bottom} from '@element-plus/icons-vue'
    import {ref, reactive, onMounted,watch} from 'vue'
    import axios from 'axios'
    import { ElMessage } from 'element-plus'


    const data = reactive(
        {
            inputFileName: '',
            tableData: [],

            currentPage: 1,
            pageSize: 5,
            total: 10,
            background: false,
            small: false,
        }
    )


    onMounted(() => {
        getData()
    })
    const getData = () => {
        request.get('/file/page',{
            params: {
                pageNum: data.currentPage,
                pageSize: data.pageSize,
                name: data.inputFileName
            }
        })
            .then((res) => {
                // console.log(res)
                data.tableData = res.records
                data.total = res.total
            })
    }

    //上传成功直接刷新页面
    const handleFileSuccess = () => {
        getData()
        ElMessage({
            showClose: true,
            message: '上传成功',
            type: 'success',
        })
    }
    //点击下载
    const download = (url) => {
        window.open(url)
    }
    const del = (id) => {
        request.delete("/file/" + id).then(res => {
            // console.log(res)
                if (res.code == '200') {
                    ElMessage({
                        showClose: true,
                        message: '删除成功',
                        type: 'success',
                    })
                    getData()
                } else {
                    ElMessage({
                        showClose: true,
                        message: '删除失败',
                        type: 'error',
                    })
                }
            })
    }
    const handleSizeChange = (val) => {
        data.pageSize = val
        getData()
    }
    const handleCurrentChange = (val) => {
        data.currentPage = val
        getData()
    }
    //点击预览
    const preView = (row) => {

        //要预览文件的访问地址
        let originUrl = row.url;
        console.log(row.url)
        function base64Encode(originUrl){
            let rv;
            rv = encodeURIComponent(originUrl);
            rv = unescape(rv);
            rv = window.btoa(rv);
            return rv;
        }

        // window.open('http://124.221.133.96:8012/onlinePreview?url='+encodeURIComponent(base64Encode(originUrl)));
        window.open('http://124.221.133.96:8012/onlinePreview?url='+encodeURIComponent(base64Encode(originUrl)));
    }


    watch(
        () => data.inputFileName,
        (count, prevCount) => {
            if( count != prevCount || count== ''){
                getData()
            }
        }
    );

</script>

<style>
    .home {
        padding: 10px;
    }

    .el-table {
        border-radius: 10px;
        box-shadow: 10px 10px 10px #a7a7a7;
    }

</style>